<!--员工管理页-->
<template>
  <el-dialog title="批量导入" v-model="uploadDialog" :close-on-click-modal="false" style="width:500px;padding:40px;">
    <!-- 使用 Element Plus 的 el-upload 组件实现文件上传 -->
    <el-upload
        :action="uploadUrl"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        accept=".xlsx, .xls"
        :show-file-list="false"
        drag
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">只能上传 xlsx/xls 文件</div>
      </template>
    </el-upload>
  </el-dialog>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">员工管理</span>
    <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">新增员工</el-button>
    <el-button @click="upload" type="primary" style="float:right;margin-top:13px;margin-right: 15px;">批量导入</el-button>
  </div>
  <!-- 新增员工弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入内容" v-model="saveEmployeeForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-select placeholder="请选择部门" v-model="saveEmployeeForm.deptId">
              <el-option v-for="item in deptArr" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入内容" v-model="saveEmployeeForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话号码">
            <el-input placeholder="请输入内容" v-model="saveEmployeeForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入内容" v-model="saveEmployeeForm.age"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-select placeholder="请选择" v-model="saveEmployeeForm.gender">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select placeholder="请选择" v-model="saveEmployeeForm.status">
              <el-option v-for="item in empStatusArr" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职级">
            <el-select placeholder="请选择" v-model="saveEmployeeForm.level">
              <el-option v-for="item in empLevelArr" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="上级">
            <el-select placeholder="请选择" v-model="saveEmployeeForm.parentId">
              <el-option v-for="item in employeeArr" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select placeholder="请选择" v-model="saveEmployeeForm.roleId">
              <el-option label="管理员" value="1"></el-option>
              <el-option label="编辑" value="2"></el-option>
              <el-option label="访客" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="住址">
            <el-input placeholder="请输入内容" v-model="saveEmployeeForm.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input placeholder="请输入内容" v-model="saveEmployeeForm.realName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveEmployee">确定</el-button>
    </template>
  </el-dialog>
  <!-- 员工搜索卡片 -->
  <el-card style="margin:5px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="员工编号">
        <el-input placeholder="请输入" style="width:100px;" type="number"
                  v-model="searchEmployeeForm.id" @keydown.enter="loadEmployee"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input placeholder="请输入" style="width:150px;"
                  v-model="searchEmployeeForm.username" @keydown.enter="loadEmployee"></el-input>
      </el-form-item>
      <el-form-item label="登录状态" style="width: 180px;">
        <el-select placeholder="请选择" v-model="searchEmployeeForm.status">
          <el-option label="启用" value="1"></el-option>
          <el-option label="取消" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工职级" style="width: 180px;">
        <el-select placeholder="请选择" v-model="searchEmployeeForm.level">
          <el-option v-for="item in empLevelArr" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadEmployee">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 员工列表 -->
  <el-card style="margin:5px;">
    <el-table :data="employeeArr">
      <el-table-column prop="id" label="员工编号" width="80" align="center"/>
      <el-table-column prop="username" label="用户名" align="center"/>
      <el-table-column prop="realName" label="真实姓名" align="center"/>
      <el-table-column prop="age" label="年龄" align="center"/>
      <el-table-column prop="gender" label="性别" align="center" :formatter="genderFormatter"/>
      <el-table-column prop="email" label="邮箱" align="center"/>
      <el-table-column prop="phone" label="电话" align="center"/>
      <el-table-column prop="address" label="住址" align="center"/>
      <el-table-column prop="level" label="员工职级" align="center" :formatter="empLevelFormatter"/>
      <el-table-column prop="parentId" label="上级领导" align="center" :formatter="parentFormatter"/>
      <el-table-column prop="deptId" label="部门" align="center" :formatter="deptFormatter"/>
      <el-table-column prop="status" label="状态" align="center" :formatter="statusFormatter"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editEmployee(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delEmployee(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const uploadDialog=ref(false)
const upload = () => {
  uploadDialog.value=true
}
const uploadUrl=ref(BASE_URL+'/v1/employee/import')
// 文件上传成功后的回调函数
const handleSuccess = (response) => {
  if (response.includes('成功')) {
    ElMessage.success(response);
    loadEmployee()
    uploadDialog.value=false
  } else {
    ElMessage.error(response);
  }
};

// 文件上传失败后的回调函数
const handleError = () => {
  ElMessage.error('导入失败');  // 显示错误消息
};

// 文件上传前的验证函数
const beforeUpload = (file) => {
  // 检查文件类型是否为 Excel 文件
  const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  if (!isExcel) {
    ElMessage.error('只能上传 xlsx/xls 文件');  // 如果不是 Excel 文件，显示错误消息
    return false;
  }
  return true;  // 允许上传
};

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增员工');
//定义对象用来保存搜索条件
const searchEmployeeForm =ref({id:'',username:'',status:'',level:''});
//定义数组用来保存员工表格数据
const employeeArr = ref([]);
const deptArr=ref([]);
const empLevelArr=ref([]);
//重置按钮
const resetSearch = ()=>{
  searchEmployeeForm.value = {};
  loadEmployee();
}
const handleClose=()=>{
  dialogVisible.value = false;
}
//定义加载员工信息的方法
const loadEmployee = () => {
  let data=searchEmployeeForm.value;
  axios.post(BASE_URL+'/v1/employee/select',data).then((response)=>{
    if(response.data.code==2000){
      employeeArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const dept=ref({});
const loadDept = () => {
  axios.post(BASE_URL+'/v1/department/select',dept.value).then((response)=>{
   if(response.data.code==2000){
      deptArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const empStatusArr=ref([])
onMounted(()=>{
  loadDept();
 loadEmployee();
  loadDictOptions(empLevelArr,'EmpLevel');
  loadDictOptions(empStatusArr,'EmpStatus');
})
const genderFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '男';
  }else if(cellValue == 0){
    cellValue = '女';
  }
  return cellValue;
}
const statusFormatter = (row,column,cellValue,index)=>{
  if (!empStatusArr.value){
    return cellValue;
  }
  for (let item of empStatusArr.value){
    if (item.value==cellValue){
      cellValue=item.label
    }
  }
  return cellValue;
}
const deptFormatter=(row,column,cellValue,index)=>{
  if (!deptArr.value){
    return cellValue;
  }
  for (let item of deptArr.value){
    if (item.id == cellValue){
      cellValue = item.name
    }
  }
  return cellValue;
}
const parentFormatter=(row,column,cellValue,index)=>{
  if (!employeeArr){
    return cellValue;
  }
  for (let item of employeeArr.value){
    if (item.id == cellValue){
      cellValue = item.username
    }
  }
  return cellValue;
}
const empLevelFormatter=(row,column,cellValue,index)=>{
  if (!empLevelArr){
    return cellValue;
  }
  for (let item of empLevelArr.value){
    if (item.value== cellValue){
      cellValue = item.label
    }
  }
  return cellValue;
}


//定义对象用来收集弹窗表单的所有数据
const saveEmployeeForm=ref({
  username:'',
  email:'',
  phone:'',
  age:'',
  gender:'',
  status:'',
  level:'',
  parentId:'',
  roleId:'',
  address:'',
  realName:'',
  deptId:''
});
//定义新增的方法
const saveEmployee = () => {
  axios.post(BASE_URL+'/v1/employee/save',saveEmployeeForm.value).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success(response.data.msg);
      saveEmployeeForm.value={};
      dialogVisible.value=false;
      loadEmployee();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义修改的方法
const editEmployee = (id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '编辑员工';
  saveEmployeeForm.value.id = id;
  axios.post(BASE_URL+'/v1/employee/select',saveEmployeeForm.value).then((response)=>{
    if(response.data.code==2000){
      saveEmployeeForm.value = response.data.data[0];
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//定义删除的方法
const delEmployee = (id)=>{
  if(confirm('您确认要删除该记录吗?')) {
    axios.post(BASE_URL + '/v1/employee/delete/'+id).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success(response.data.msg);
        loadEmployee();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}



</script>